<template>
	<view class="container">
		<image class="background" src="/static/loginBackground.jpg"></image>
		<view class="form-container">
			<!-- 用户名输入框 -->
			<view class="input-group">
				<uni-easyinput placeholder="请输入用户名" v-model="username" clearable="true" type="text">
					<template #left>
						<image class="icon-image" src="/static/user.png"></image>
					</template>
				</uni-easyinput>
			</view>

			<!-- 密码输入框 -->
			<view class="input-group">
				<uni-easyinput placeholder="请输入密码" v-model="password" type="password">
					<template #left>
						<image class="icon-image" src="/static/lock.png"></image>
					</template>
				</uni-easyinput>
			</view>

			<button class="register-button" @click="login">登录</button>
			<text class="login-link">
				还未有账号，
				<text class="login-link-highlight" @click="goToRegister">点我注册</text>
			</text>
		</view>
	</view>
</template>

<script>
	import {
		userLogin,
		getUserInfo
	} from '@/api/user.js'; // 引入登录接口
	export default {
		data() {
			return {
				username: '',
				password: ''
			};
		},
		methods: {
			async login() {
				// 校验输入是否符合要求
				if (!this.username || !this.password) {
					uni.showToast({
						title: '请输入用户名和密码',
						icon: 'none'
					});
					return;
				}

				// 校验账号和密码长度
				if (this.username.length < 6 || this.username.length > 30) {
					uni.showToast({
						title: '账号长度应为6-30个字符',
						icon: 'none'
					});
					return;
				}
				if (this.password.length < 6 || this.password.length > 30) {
					uni.showToast({
						title: '密码长度应为6-30个字符',
						icon: 'none'
					});
					return;
				}

				// 校验是否含特殊字符或中文
				const specialCharPattern = /[^\w]/;
				const chinesePattern = /[\u4e00-\u9fa5]/;
				if (specialCharPattern.test(this.username) || chinesePattern.test(this.username)) {
					uni.showToast({
						title: '账号不能包含特殊字符或中文',
						icon: 'none'
					});
					return;
				}
				if (specialCharPattern.test(this.password) || chinesePattern.test(this.password)) {
					uni.showToast({
						title: '密码不能包含特殊字符或中文',
						icon: 'none'
					});
					return;
				}

				// 登录逻辑
				try {
					const response = await userLogin({
						username: this.username,
						password: this.password
					});

					if (response.code == 200) {
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						});
						// 跳转到发现页
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/home/home',
							});
							// 存储 Token
							uni.setStorageSync('token', response.data);
							// 设置用户信息
							this.setUserInfo();
						}, 1500); // 延迟 1.5 秒（与 showToast 的默认持续时间一致）
					} else {
						uni.showToast({
							title: response.message,
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showToast({
						title: '登录失败: ' + (error.message || error),
						icon: 'none'
					});
				}
			},
			goToRegister() {
				uni.navigateTo({
					url: '/packageLogin/pages/register/register'
				});
			},
			setUserInfo() {
				console.log('发送获取用户信息的请求:');
				getUserInfo() // 发送获取用户信息的请求
					.then(response => {
						// 更新用户信息和登录状态

						if (response.code == 200) {

							const userId = uni.getStorageSync('userId');
							if (!userId) {
								uni.setStorageSync('userId', response.data.id);
							}
							const userInfo = uni.getStorageSync('userInfo');
							if (!userInfo) {
								uni.setStorageSync('userInfo', JSON.stringify(response.data));
							}
							console.log('获取用户信息成功:', response.data);

						}
					})
					.catch(error => {
						console.error('获取用户信息失败:', error);
					});
			}
		}
	};
</script>

<style>
	.container {
		position: relative;
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: flex-end;
		/* 确保表单容器位于底部 */
	}

	.background {
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.form-container {
		padding-top: 30px;
		width: 100%;
		height: 40%;
		/* 限制最大高度 */
		background-color: white;
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
		/* 上方阴影，模拟Bottom Sheet效果 */
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		bottom: 0;
	}

	.register-button {
		background-color: #2f6ef5;
		color: white;
		width: 90%;
		/* 按钮宽度与输入框一致 */
		margin-top: 20px;
		/* 增加按钮与输入框之间的间距 */
		border-radius: 10px;
		/* 增加圆角 */
		text-align: center;
		font-size: 20px;
		transition: background-color 0.3s;
	}

	.register-button:active {
		background-color: #1e4dbf;
		/* 按下时按钮颜色变化 */
	}

	.input-group {
		position: relative;
		margin-bottom: 15px;
		width: 90%;
		height: 50px;
		/* 确保输入框高度一致 */
	}

	.icon-image {
		width: 20px;
		/* 图标宽度 */
		height: 20px;
		/* 图标高度 */
		margin-left: 14px;
		/* 图标与输入框内容的间距 */
	}

	.uni-easyinput__content-input {
		padding-left: 18px !important;
		/* 确保输入框内的文本有足够的左边距，避免与icon重叠 */
		height: 50px !important;
		/* 保持输入框高度 */
	}

	.uni-easyinput__content.is-input-border {
		background: #f6f6f6 !important;
	}

	.login-link {
		margin-top: 20px;
		color: black;
		/* 设置整体文字颜色为黑色 */
		text-align: center;
	}

	.login-link-highlight {
		color: #007aff;
		/* 设置“点击登录”的颜色为蓝色 */
	}
</style>